<!DOCTYPE html>
<html lang="{{ site.lang | default: "en-US" }}">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

{% seo %}
    <link rel="stylesheet" href="{{ "/assets/css/style.css?v=" | append: site.github.build_revision | relative_url }}">
    <style>
      .links a { color: #333; font-size: 16px; font-weight: normal; vertical-align: middle; margin-right: 10px;}
      .menu {
	  width: 25px;
	  height: 3px;
	  background-color: black;
	  margin: 6px 0;
	  border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <div class="container-lg px-3 my-5 markdown-body">
      {% if site.title and site.title != page.title %}
      <h1>
        <a href="{{ "/" | absolute_url }}" style="color: black; margin-right: 50px;">
        {% if site.logo %}
        <img src="{{ site.logo | absolute_url }}" height=auto width=50px style="display: inline; vertical-align: middle;"/> 
        {% endif %}
	{{ site.title }}</a>
	<div id="menu" onclick="unfold()" style="display: none; float: right; cursor: pointer; vertical-align: middle;">
	    <div class="menu"></div>
	    <div class="menu"></div>
	    <div class="menu"></div>
	</div>
        <ul id="links" class="links" style="float: right; display: none; padding: 5px;">
	  <li class="link"><a href="{{ site.baseurl }}/blog">Blog</a></li>
	  <li class="link"><a href="{{ site.baseurl }}/docs">Docs</a></li>
	  <li class="link"><a href="{{ site.baseurl }}/faq">FAQ</a></li>
	  <li class="link"><a href="{{ site.baseurl }}/reference">Reference</a></li>
	</span>
      </h1>
      {% endif %}

      {{ content }}

      {% if site.github.private != true and site.github.license %}
      <div class="footer border-top border-gray-light mt-5 pt-3 text-right text-gray">
        This site is open source. {% github_edit_link "Improve this page" %}.
      </div>
      {% endif %}
    </div>
    <script>
      var menu = document.getElementById('menu');
      var links = document.getElementById('links');
      var li = document.getElementsByClassName('link')

      var update = function(v) {
        for (i = 0; i < li.length; i++) {
          li[i].style.display = v;
        }       
      }

      var resize = function() {
        if (window.innerWidth < 850) {
          menu.style.display = "block";
          links.style.display = "none";
	  links.style.float = "left";
          update("block");
        } else {
	  menu.style.display = "none";
	  links.style.display = "block";
	  links.style.float = "right";
          update("inline");
	}
      }

      var unfold = function() {
        if (links.style.display == "none") {
          links.style.display = "block";
	  links.style.float = "none";
        } else {
          links.style.display = "none";
	}
      }

      window.onload = resize;
      window.onresize = resize;
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.1.0/anchor.min.js" integrity="sha256-lZaRhKri35AyJSypXXs4o6OPFTbTmUoltBbDCbdzegg=" crossorigin="anonymous"></script>
    <script>anchors.add();</script>
    {% if site.google_analytics %}
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      ga('create', '{{ site.google_analytics }}', 'auto');
      ga('send', 'pageview');
    </script>
    {% endif %}
  </body>
</html>
